<template>
  <page-wrap ref="pageWrap" hideTab back title="职途报告" :showTop="false" :dark="loaded ? false : true"
    :hideSafeArea="true">
    <view class="create-report" :style="'padding-top:' + navHeight + 'px;'">
      <careerReportJobTips ref="careerReportJobTips" @update:isFill="updateIsFill" />
      <view class="sample">
        <image :src="sampleImg" class="sample-img"></image>
        <view class="sample-text">{{ sampleText }}</view>
      </view>
    </view>
    <view class="operate-bar">
      <view class="btn" @click="createQRFn"> 生成在线职途报告 </view>
    </view>
  </page-wrap>
</template>

<script>
import { createQR } from "@/api/modules/career";
import careerReportJobTips from "./careerReportJobTips.vue";
export default {
  components: {
    careerReportJobTips,
  },
  data() {
    return {
      navHeight: getApp().globalData.navHeight,
      sampleImg: this.$imgBase + "careerPath/sampleImg.png",
      sampleText: "示例",
      fromSxh: "",
      isFill: true,
    };
  },
  onLoad(opt) {
    this.fromSxh = opt.fromSxh;
  },
  onShow() {
    this.$refs.careerReportJobTips.getJobList();
  },
  methods: {
    updateIsFill(isFill) {
      this.isFill = isFill;
    },
    async createQRFn() {
      const params = {
        fromPersonId: uni.getStorageSync("SxhPersonId"),
        valueId: 0, // 这里是附件id 不需要复制 直接传0
        rightId: 7, // 职途报告权益id
        shareUrl: "pagesSub/doubleChannelChoosingMeeting/qrCodeParse",
        cardType: uni.getStorageSync("cardType"),
      };
      const res = await createQR(params);
      if (res.code == 200) {
        uni.navigateTo({
          url:
            "/pagesSub/doubleChannelChoosingMeeting/qrCodeResult?from=CreateCareerReportPrePage" +
            "&buttonText=立即查看结果" +
            "&qrCodeText=扫码体验职途报告" +
            "&qrcodeUrl=" +
            res.data.qRImageBase64,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.create-report {
  width: 100%;
  height: 90vh;
  background-image: url($img-base + "careerPath/consultantHallBg.png?v=2");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff5ea;
  display: flex;
  flex-direction: column;
  .sample {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .sample-img {
      width: 706rpx;
      height: 928rpx;
      margin: 88rpx 44rpx 0 0;
    }

    .sample-text {
      font-size: 32rpx;
      padding: 6rpx 32rpx;
      color: #333;
      background: #e5e5e5;
      border-radius: 8rpx;
    }
  }
}
.operate-bar {
  width: 100%;
  height: 80rpx;
  position: fixed;
  left: 32rpx;
  bottom: calc(36rpx + constant(safe-area-inset-bottom));
  bottom: calc(36rpx + env(safe-area-inset-bottom));
  .btn {
    width: calc(100% - 64rpx);
    border-radius: 100rpx;
    background: #f75a3e;
    color: #fff;
    text-align: center;
  }
}
</style>
